<template>
<!-- v-if="musicId" -->
  <div :class="['playPage',{pause:pause}]" >
    <audio v-if="playmusice" autoplay 
    :src="`https://music.163.com/song/media/outer/url?id=${playmusice.id}.mp3`" @timeupdate="tiemupdate"
    @play='play' @pause='pause' ref='change' @ended="ended" ></audio>

    <transition name="miniactive">
      <div class="miniBar">
        <!-- 播放歌曲的图片 -->
        <img :src="playmusice.picUrl" @click="isFull=true"  width="50" height="50" :style="{'animation-play-state':imgState}"> 
        <p @click="isFull=true">{{playmusice.name}} - {{playmusice.artists[0].name}}</p>

        <!-- 播放状态 -->
        <div class="platstate" @click="changeState">
          <i :class="iconstate"></i>
          <canvas width="50" height="50" ref="minPlay"></canvas>
        </div>
        <!-- 播放列表 -->
        <div class="gedan">
          <i class="iconfont icon-gedan"  @click.stop="showmusic"></i>
        </div> 
      </div>
    </transition>
      <!-- 播放列表 -->
      <div class="playLIst" ref="nowslist" @click.stop='hiddenMusic'>
      <ul>
        <div>
          <i class="iconfont icon-jiantou9" @click.stop='hiddenMusic'></i>
          <i class="iconfont icon-delete" @click.stop='$emit("emptys")' ></i>
        </div>
        <span class="now">播放列表</span>
        <li v-for="item in musicList" :key="item.id"  @click.stop='$emit("play",item)'>
          <Loading style="margin-top: 12px;margin-right: 16px" v-if="item.id==playmusice.id"></Loading><span :style="{color:item.id==playmusice.id?'#EE6A22':''}">{{item.name}} -- {{item.artists[0].name}}</span>
            <i class="iconfont icon-fork" @click.stop="changenowMUsic(item)"></i>
        </li>
      </ul>
    </div>
    <!-- 首页的播放歌单列表 -->
    <transition name="slide">
      <div class="FullScreen" v-show="isFull" >
        <div class="mc" :style="`background-image:url(${playmusice.picUrl})`"></div>
        <div class="top">
          <i class="iconfont icon-jiantou9" @click="isFull=false"></i>
          <div class="songinfo">
              <p class="songName">{{playmusice.name}}</p>
              <p class="songauthorName"> {{playmusice.artists[0].name}}</p>
          </div>
          <i class="fa fa-share-square-o" aria-hidden="true"></i>
        </div>
        <div class="songImg">
          <div class="yb" :style="`transform:${rotedeg}`"></div>
          <div class="songimg" :style="{'animation-play-state':imgState}">
            <img :src="playmusice.picUrl">
          </div>
        </div>
        <!-- 歌词 -->
        <div class="songci"  v-show="songciList">
          <ul :style="{transform:`translateY(${Litop}px)`}">
            <li v-for="(item,index) in songciList" :key="index" :class='{lyricLignt:index==lyricIndex}'  ref="lyricLI">{{item.lyrics}}</li>
          </ul>
        </div>
        <div class="player">
          <!-- 评论 -->
          <router-link :to="`/commentLIst/${playmusice.id}`"><i class="iconfont icon-pinglun" @click="isFull=false"></i></router-link>

          <div class="time">
              <span class="nowtme">{{currentTimes|formatch}}</span>
              <input type="range" max="100" v-model="timeRange" @change='changetime' :style="`background-size: ${timeRange}% 100%;`">
              <span class="alltime">{{duration|formatch}}</span>
          </div>
          <!-- <br> -->
          <div class="playicon">
            <!-- 播放状态   -->
            <i :class="changeplayMode" @click ='changePlay'></i>   
            <!-- 上一首 -->
            <i class="iconfont icon-48shangyishou" @click="prev" ></i>
            <!-- 播放 / 暂停 -->
            <i :class="playstateImg" @click="changePlayer"></i>
            <!-- 下一首 -->
            <i class="iconfont icon-49xiayishou" @click="next"></i>
            <!-- 歌单 -->
            <i class="iconfont icon-gedan" @click="showlist"></i>
         
          </div>
          <!-- 在播放界面里面的播放歌单列表 -->
          <div class="playLIst" ref="nowlist" @click.stop='hiddenNowlist'>
            <ul>
              <div>
                <i class="iconfont icon-jiantou9" @click.stop='hiddenNowlist'></i>
                <i class="iconfont icon-delete" @click.stop='$emit("emptys")' ></i>
              </div>
              <span class="now">播放列表</span>
              <li v-for="(item,index) in musicList" :key="item.id"  @click.stop='$emit("play",item)'>
                <Loading style="margin-top: 12px;margin-right: 16px" v-if="item.id==playmusice.id"></Loading><span :style="{color:item.id==playmusice.id?'#EE6A22':''}">{{item.name}} -- {{item.artists[0].name}}</span>
                <i class="iconfont icon-fork" @click.stop="changenowMUsic(item,index)"></i> 
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import Loading from '../components/Loading'
export default {
  name:"Play",
  props:{
    playmusice:{
      type:Object,
      default:function(){
        return null
      }
    },
    musicList:Array
  },
  data(){
    return{
      paused:true,
      iconstate:"iconfont icon-zanting_huaban",
      imgState:'running',
      // 切换到播放界面
      isFull:false,
      rotedeg:'rotate(-10deg)',
      songciList:[],
      showList:true,
      timeRange:0,
      // 播放的总时长
      duration:0,
      currentTimes:0,
      playMode:'circle',//单曲循环 随机播放
      lyricIndex:0,
      Litop:0, // 歌词滚动
      playstateImg:"iconfont icon-step",
      // 播放模式的图标
      changeplayMode:"iconfont icon-hanhan-01-01",
      // 记录播放的nums值 
      nums:1
    }
  },
  filters:{
    formatch(sec){
      if(!sec){
        return '-'
      }
      var min = Math.floor(sec%3600);//分钟
      let mins =  Math.floor(min/60)<10?'0'+Math.floor(min/60):Math.floor(min/60)
      let second = Math.floor((sec%60))<10?'0'+Math.floor((sec%60)):Math.floor((sec%60))
      return  mins + ":"+second ;
      }
  },
    created(){
      this.getsongci(this.playmusice)
    },
    components:{
      Loading
    },
    watch:{
      playmusice(value){
       this.getsongci(value)
      },
      paused(value){
       if(value == true){ // 播放状态
        this.iconstate = 'iconfont icon-z'
        this.playstateImg = 'iconfont icon-bofang'
        this.rotedeg = 'rotate(-30deg)'
        this.imgState = 'paused'
       }else if(value == false){  // 暂停状态
        this.iconstate = 'iconfont icon-zanting_huaban'
        this.rotedeg = 'rotate(-10deg)'
        this.playstateImg = 'iconfont icon-step '
        this.imgState = 'running'
       }
      }
  },
  methods:{
    changenowMUsic(value,index){
      
      let playId = this.playmusice.id;
      let prevMusic = null;
      if(value.id==this.playmusice.id){
        //  this.$emit('delete',value)
         this.musicList.filter((d,index)=>{
            if(d.id==playId){ // 找到当前播放的音乐
                let item = ++index; // 下一首的下标
                console.log(item);
                if(item>this.musicList.length-1) item = 0 // 判断
                prevMusic = this.musicList[item]  
            }
          })
          this.$emit('play',prevMusic)
      }
      console.log('value=>',value);
      console.log(index);
      this.$emit('delete',value.id);
    },
    // 获取歌词
    getsongci(value){
       this.$http.get('/lyric',{
          params:{
            id:value.id
          }
        }).then(d=>{
          let lyric = d.data.lrc.lyric
          let lyricArray = lyric.split('\n');
          lyricArray.pop()
          let reg=/\[(\d+):(\d+\.\d+)\](.*)/;
          let arr = [];
          for(let i=0;i<lyricArray.length;i++){
            let regex = new RegExp(reg);
            if(regex.test(lyricArray[i])){
              let item = {
                time:(parseInt(RegExp.$1*60)+parseFloat(RegExp.$2)),
                lyrics:RegExp.$3,
              }
              arr.push(item)
            }
          }
          this.songciList = arr
        })
    },
    showmusic(){
      console.log(this.showList);
      if(this.showList == true){
        let nowslist = this.$refs.nowslist; 
        nowslist.style.transform='translateY(0vh)';
        this.showList = false;
     }
    },
    hiddenMusic(){
      if(this.showList == false){
        console.log(111);
        let nowslist = this.$refs.nowslist; 
        nowslist.style.transform='translateY(100vh)';
        this.showList = true;
      }
    },
    showlist(){
      if(this.showList == true){
        let nowlist = this.$refs.nowlist; 
        nowlist.style.transform='translateY(0vh)';
        this.showList = false;
      }
    },
     hiddenNowlist(){
        if(this.showList == false){
          console.log(111);
          let nowlist = this.$refs.nowlist;
          nowlist.style.transform='translateY(100vh)';
          this.showList = true;
        }
      },
      // this.paused 是播放的状态  true 为播放 false为暂停
    changePlayer(){
       console.log(this.paused);
       let audio = this.$refs.change
        if(this.paused == true){
          audio.play()
          this.imgState = 'running'
        }else if(this.paused == false){
          audio.pause()
        }  
    },
    changePlay(){
      this.nums++
      if(this.nums>3) this.nums = 1;
      console.log(this.nums);
      if(this.nums == 2){
        this.changeplayMode = 'iconfont icon-liebiaoxunhuan'
        this.playMode = 'list',
        console.log(this.playMode);
        console.log('现在是列表循环');
      }else if(this.nums == 3){
        this.changeplayMode = 'iconfont icon-suijibofang'
        this.playMode = 'rand'
        console.log(this.playMode);
        console.log('现在是随机播放');

      }else{
        this.changeplayMode = 'iconfont icon-hanhan-01-01'
        this.playMode = 'circle';
         console.log(this.playMode);
        // this.next();
        console.log('现在是单曲循环');
      }

    },
    prev(){
      // 当点击上一曲的时 判断当前的播放状态是什么
      let playId = this.playmusice.id;
      let prevMusic = null;
      // 当前状态为 单曲循环时
      if(this.playMode =='circle'){
        this.musicList.filter((d,index)=>{
          if(d.id==playId){ // 找到当前播放的音乐
              let i = --index; // 下一首的下标
              if(i< 0) i = this.musicList.length-1 // 判断
              prevMusic = this.musicList[i]  
          }
        })
        this.$emit('play',prevMusic)
        // 当前的播放状态为 随机播放
      }else if(this.playMode == 'rand'){
           let randIndex = Math.floor(Math.random()*this.musicList.length);
           let randMusic = this.musicList[randIndex];
           this.$emit('play',randMusic)
           // 当前的播放状态为 列表循环
      }else if(this.playMode == 'list'){
            this.musicList.filter((d,index)=>{
              if(d.id==playId){ // 找到当前播放的音乐
                   let i = --index; // 下一首的下标
                   if(i< 0) i = this.musicList.length-1 // 判断
                   prevMusic = this.musicList[i]   
              }
            })
            this.$emit('play',prevMusic)
      }

    },
    next(){
      // 当点击下一曲的时 判断当前的播放状态是什么
      let playId = this.playmusice.id;
      let prevMusic = null;
      if(this.playMode == 'circle'){
        this.musicList.filter((d,index)=>{
          if(d.id==playId){ // 找到当前播放的音乐
              let item = ++index; // 下一首的下标
              if(item>this.musicList.length-1) item = 0 // 判断
              prevMusic = this.musicList[item]  
          }
        })
        this.$emit('play',prevMusic)
      }else if(this.playMode == 'rand'){
        let randIndex = Math.floor(Math.random()*this.musicList.length);
        let randMusic = this.musicList[randIndex];
        this.$emit('play',randMusic)
      }else if(this.playMode == 'list'){
         this.musicList.filter((d,index)=>{
            if(d.id==playId){ // 找到当前播放的音乐
                let item = ++index; // 下一首的下标
                if(item>this.musicList.length-1) item = 0 // 判断
                prevMusic = this.musicList[item]  
            }
          })
          this.$emit('play',prevMusic)
      }
    },
    play(){
        this.paused = false
    },
    pause(){
        this.paused = true
    },
    ended(){
        console.log(this.musicList);
        this.iconstate = 'iconfont icon-z'
        this.imgState = 'paused'
        if(this.playMode=='circle'){
          // 单曲循环
          this.$refs.change.play()
        }else if(this.playMode=='list'){
          // 列表播放
           this.next();
        }else if(this.playMode=='rand'){
          // 随机播放
            let randIndex = Math.floor(Math.random()*this.musicList.length);
            let randMusic = this.musicList[randIndex];
            this.$emit('play',randMusic)
        }
    },
    changetime(e){//改变时间
      let val = e.target.value;
      let audio = this.$refs.change
      let ctime = ((val/100)*this.duration)
        audio.currentTime = ctime;
    },
  
    // 判断音乐的播放状态
    changeState(){
      // this.paused 是播放的状态  true 为播放 false为暂停
        let audio = this.$refs.change
        if(this.paused){
          audio.play()
          // this.iconstate = 'iconfont icon-zanting_huaban'
          this.imgState = 'running'
        }else{
          audio.pause()
          // this.iconstate = 'iconfont icon-z'
          this.imgState = 'paused'
        }

    },
    tiemupdate(e){
      let audio = e.target;
      this.currentTimes = audio.currentTime; // 获取当前播放时间
      let duration = audio.duration;  // 获取总播放时长
      let lyricLI = this.$refs.lyricLI;
      this.duration = duration;
      // console.log(currentTime,duration);
      this.drawCricle( this.currentTimes ,duration);
      this.timeRange=( this.currentTimes /duration)*100;
      // console.log(this.songciList);
      if(!this.playmusice){
      for(var i = 0;i<this.songciList.length;i++){
        if(i==this.songciList.length-1){
          this.lyricIndex = i;
          break;
        }
       if( this.currentTimes >=this.songciList[i].time &&  this.currentTimes <this.songciList[i+1].time){
         this.lyricIndex = i;
         this.Litop = -lyricLI[i].offsetTop
         break;
       }
     }
      }
     
    },
    // 画布画圆
    drawCricle(currentTime,duration){
      let canvas = this.$refs.minPlay;
     if (!canvas) {
       return
     }
      let context = canvas.getContext('2d');
          context.clearRect(0,0,50,50);
          context.beginPath()
          context.strokeStyle = '#D3D6C3';
          context.lineWidth=3;
          context.arc(25,25,20,0,2*Math.PI);
          context.stroke();
          context.closePath()

          let arrp = (currentTime / duration)*2*Math.PI
          context.beginPath()
          context.strokeStyle = '#EE6A22';
          context.lineWidth=3;
          context.arc(25,25,20,0,arrp);
          context.stroke();
          context.closePath()
    }
  }
}
</script>
<style lang="less" scoped>
.playPage{
  .miniBar{
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 10px;
      animation: randImg 3s  linear 0s infinite;
    }
    p{
      flex: 1;
      text-align: center;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 14px;
    }
    div{
      width: 50px;
      height: 50px;
    }
  .platstate{
    position: relative;
    margin-right: 10px;
    i{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      font-size: 26px;
      color: #EE6A22;
    }
  }
  .gedan{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    i{
      font-size: 40px;
      color: #5A5C4F;

    }
   }
  }
  .FullScreen{
    position: fixed;
    bottom: 0px;
    height: 100vh;
    z-index: 15;
    width: 100%;
    background-image: linear-gradient(to right, #e1bf77, #fb5c05);
      .mc{
        z-index: -1;
        width: 100vh;
        height: 100vh;
        background-size: 100%;
        transform: scale(5.5);
        position: absolute;
        filter: blur(3px);
        top: 0px;
        left: 0px;
    }
    .top{
      display: flex;
      border-bottom: 1px solid #F4F4F4;
      height: 56px;
      align-items: center;
      .icon-jiantou9{
        flex: 1;
        // line-height: 45px;
        text-align: center;
        display: inline-block;
        color: #fff;
      }
      .songinfo{
         flex: 3;
         text-align: center;
         overflow: hidden;
          p.songName{
            color: #fff;
            font-size: 15px;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          p.songauthorName{
            color: #fff;
            font-size: 10px;
            margin-top: 5px;
          }
      
      }
      .fa-share-square-o{
         flex: 1;
        //  line-height: 45px;
         text-align: center;
         display: inline-block;
         color: #fff;
      }
    }
    .songImg{
      width: 100%;
      position: relative;
      .yb{
        position: absolute;
        background: url('../assets/yinbi.png') no-repeat;
        background-size: 100%;
        width: 80px;
        height: 170px;
        top: 0px;
        left: 47%;
        z-index: 2;
        transform-origin: left top;
        transition: transform 0.5s;
        // -30deg
      }
      .songimg{
        position: absolute;
        background: url('../assets/yuanpan.png') no-repeat;
        background-size: 100%;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 50%;
        margin-left: -100px;
        animation: randImg 5s  linear 0s infinite;
        img{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 130px;
          height: 130px;
          border-radius: 50%;
        }
      }
    }
    .songci{
        position: absolute;
        top: 299px;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        overflow: hidden;
        text-align: center;
        overflow-y: auto;
        margin-top: 15px;
        &::-webkit-scrollbar { width: 0 !important }
        ul{
          height: 32vh;
          padding-top: 10px;
          transition: all 0.5s;
          li{
            font-size:14px;
            color:#fff;
            line-height: 30px;
            &.lyricLignt{
              transform: scale(1.2);
              color:#EE6A22
            }
          }
        }
    }
    .player{
      position: absolute;
      bottom: 10px;
      width: 100%;
      i.icon-pinglun{
        float: right;
        font-size: 27px;
        color: #fff;
      }
      .time{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .nowtme{
          flex: 1;
          text-align: center;
          color:rgba(238,106,34,0.8)
        }
         input[type=range]{
           flex: 4;
        -webkit-appearance: none;/*清除系统默认样式*/
        display: block;
        margin: 0 auto;
        background: -webkit-linear-gradient(#EE6A22, #EE6A22) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
        // background-size: 75% 100%;/*设置左右宽度比例*/
        height: 3px;/*横条的高度*/
        &::-webkit-slider-thumb {
            -webkit-appearance: none;/*清除系统默认样式*/
            height: 20px;/*拖动块高度*/
            width: 20px;/*拖动块宽度*/
            background: #fff;/*拖动块背景*/
            border-radius: 50%; /*外观设置为圆形*/
            border: solid 1px #ddd; /*设置边框*/
        }
        }
        .alltime{
          flex: 1;
          text-align: center;
          color: #fff;
        }
      } 
     
      .playicon{
        display: flex;
        i{
          flex: 1;
          display: inline-block;
          line-height: 45px;
          text-align: center;
          color: #f4f4f4;
          &.icon-liebiaoxunhuan{
            font-size: 20px;
          }
          &.icon-48shangyishou{
            font-size: 25px;
          }
          &.icon-bofang,&.icon-step{
            font-size: 55px;
          }
          &.icon-49xiayishou{
            font-size: 25px;
          }
          &.icon-gedan{
            font-size: 20px;
          }
        }
      }
      .playLIst{
        width: 100%;
        position: fixed;
        height: 100vh;
        bottom: 0px;
        transform: translateY(100vh);
        transition: transform 0.5s;
        background-color: rgba(0, 0, 0,0.1);

        z-index: 3;
        ul{
          height: 50vh;
          background-color: #fff;
          position: fixed;
          bottom: 0px;
          width: 90vw;
          left: 5vw;
          border-radius: 35px;
          overflow-y: auto;
          .now{
            padding-left: 29px;
            font-size: 12px;
          }
          i.icon-jiantou9{
            display: inline-block;
            text-align: center;
            margin-top: 10px;
            margin-left: 45vw
          }
          i.icon-delete{
            float: right;
            margin-right: 20px;
            margin-top: 20px;
            font-size: 25px;
          }
          li{
            line-height: 45px;
            border-bottom: 1px solid #F4F4F4;
            padding-left: 30px;
            font-size: 14px;
            display: flex;
            span{
              flex: 1;
            }
            i{
             margin-right: 24px;
            }
          }
        }
      }
    }
  }
}

@keyframes randImg{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.playLIst{
  width: 100%;
  position: fixed;
  height: 100vh;
  bottom: 0px;
  transform: translateY(100vh);
  transition: transform 0.5s;
  background-color: rgba(0, 0, 0,0.1);
  z-index: 3;
  ul{
    height: 50vh;
    background-color: #fff;
    position: fixed;
    bottom: 50px;
    width: 90vw;
    left: 5vw;
    border-radius: 35px;
    overflow-y: auto;
    .now{
      padding-left: 29px;
      font-size: 12px;
    }
    i.icon-jiantou9{
      display: inline-block;
      text-align: center;
      margin-top: 10px;
      margin-left: 45vw
    }
    i.icon-delete{
      float: right;
      margin-right: 20px;
      margin-top: 12px;
      font-size: 20px;
    }
    li{
      line-height: 45px;
      border-bottom: 1px solid #F4F4F4;
      padding-left: 30px;
      font-size: 14px;
      display: flex;
      span{
        flex: 1;
      }
      i{
        margin-right: 22px;
      }
    }
  }
}
.slide-enter, .slide-leave-to {
  transform: translateY(100%);
  opacity: 0;
}
// 动画结束 回的地方
.slide-enter-to,.slide-leave{
  transform: translateY(0%);
  opacity: 1;
}
// 隐藏和结束的时间
.slide-enter-active,
.slide-leave-active{
  transition: all  0.5s ;
}

</style>